<template>
  <div class="gomoku-game">
    <div class="game-board">
      <div 
        v-for="(row, rowIndex) in board" 
        :key="rowIndex" 
        class="row"
      >
        <div 
          v-for="(cell, colIndex) in row" 
          :key="colIndex" 
          class="cell" 
          @click="placePiece(rowIndex, colIndex)"
          :class="{ 'disabled': winner }"
        >
          <div 
            v-if="cell !== null" 
            class="piece" 
            :class="{ black: cell === 'black', white: cell === 'white' }"
          ></div>
        </div>
      </div>
    </div>
    <div class="status">
      <p v-if="winner">Winner: {{ winner }}!</p>
      <p v-else>Current Player: {{ currentPlayer }}</p>
    </div>
    <div class="controls">
      <button @click="resetGame">Restart Game</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GomokuGame',
  data() {
    return {
      boardSize: 13,
      board: [],
      currentPlayer: 'black',
      winner: null
    };
  },
  mounted() {
    this.initializeBoard();
  },
  methods: {
    initializeBoard() {
      this.board = Array.from({ length: this.boardSize }, () => 
        Array.from({ length: this.boardSize }, () => null)
      );
      this.currentPlayer = 'black';
      this.winner = null;
    },
    placePiece(rowIndex, colIndex) {
      if (!this.winner && this.board[rowIndex][colIndex] === null) {
        this.board[rowIndex][colIndex] = this.currentPlayer;
        if (this.checkForWin(rowIndex, colIndex)) {
          this.winner = this.currentPlayer;
          this.$emit('game-over');
        }
        this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
      }
    },
    checkForWin(rowIndex, colIndex) {
      const directions = [
        { dx: 1, dy: 0 },  // Horizontal
        { dx: 0, dy: 1 },  // Vertical
        { dx: 1, dy: 1 },  // Diagonal \
        { dx: 1, dy: -1 }  // Diagonal /
      ];

      for (const { dx, dy } of directions) {
        let count = 1;
        let x = rowIndex + dx;
        let y = colIndex + dy;

        // Check in positive direction
        while (x >= 0 && x < this.boardSize && 
               y >= 0 && y < this.boardSize &&
               this.board[x][y] === this.currentPlayer) {
          count++;
          x += dx;
          y += dy;
        }

        x = rowIndex - dx;
        y = colIndex - dy;

        // Check in negative direction
        while (x >= 0 && x < this.boardSize && 
               y >= 0 && y < this.boardSize &&
               this.board[x][y] === this.currentPlayer) {
          count++;
          x -= dx;
          y -= dy;
        }

        if (count >= 5) {
          return true;
        }
      }
      return false;
    },
    resetGame() {
      this.initializeBoard();
    }
  }
};
</script>

<style scoped>
.gomoku-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
  padding: 20px;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(13, 50px);
  grid-template-rows: repeat(13, 50px);
  gap: 1px;
  background-color: #d4b08d;
  border: 3px solid #333;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.cell {
  width: 50px;
  height: 50px;
  border: 1px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cell.disabled {
  cursor: not-allowed;
  background-color: #eee;
}

.piece {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.black {
  background: linear-gradient(45deg, #2c3e50, #34495e);
  border: 2px solid #2c3e50;
}

.white {
  background: linear-gradient(45deg, #ecf0f1, #bdc3c7);
  border: 2px solid #bdc3c7;
}

.status {
  margin: 25px 0;
  font-size: 2em;
  font-weight: bold;
  color: #2c3e50;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.controls {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  margin-top: 30px;
}

button {
  padding: 12px 30px;
  font-size: 1.2em;
  cursor: pointer;
  border: none;
  border-radius: 25px;
  background: linear-gradient(45deg, #42b983, #3498db);
  color: white;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.6);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(52, 152, 219, 0.4);
}
</style>